<template>
	<view class="grouperManage">
		<view class="integral_balance">
			<view class="integral_balance_title">账户余额</view>
			<view class="integral_balance_num">{{ balance ? balance : 0 }}</view>
			<view class="grouper_btn_box">
				<view class="btn_item"><button class="yellow_btn" @tap="goLink('/pages/grouper/grouperDrawcash')">提现</button></view>
				<view class="btn_item"><button class="white_btn" @tap="goLink('/pages/grouper/grouperDrawRecord')">提现记录</button></view>
			</view>
		</view>
		<view class="tab"><shortTabs :tabs="tabs" :curTabs="curTabs" @changeTab="changeTab"></shortTabs></view>
		<view class="details_list">
			<view class="details_item" v-for="item in moneyRecordList.lists" :key="item.id">
				<view class="details_info_box">
					<view class="details_name">{{ returnInType[item.bill_source] }}</view>
					<view class="details_time">{{ item.create_time }}</view>
				</view>
				<view class="details_num">{{ bill_type == 1 ? '+' : '-' }}{{ item.bill_amt }}</view>
			</view>
		</view>
		<view class="fix_btn_box"><button class="yellow_btn" @tap="goLink('/pages/grouper/grouperOrder?status=all')">自提点订单</button></view>
	</view>
</template>

<script>
import shortTabs from '../../components/shortTabs/shortTabs.vue';
import com from '../../mixin/index.js';
export default {
	components: {
		shortTabs
	},
	mixins: [com],
	data() {
		return {
			curTabs: 0,
			tabs: ['收入明细', '支付明细'],
			balance: '',
			moneyRecordList: {
				lists: [],
				total: 1,
				total_page: 0
			},
			page: {
				page: 1,
				page_size: 12
			},
			returnInType: {
				withdraw: '提现',
				with_refund: '退款',
				team: '团长提成'
			}
		};
	},
	onLoad(val) {
		console.log(val, '获取团长信息');
		if (val.balance) {
			val.balance ? (this.balance = val.balance) : '0';
		}
		this.getBillList();
	},
	onReachBottom() {
		this.getBillList();
	},
	methods: {
		changeTab(idx) {
			this.curTabs = idx;
		},
		goLink(url) {
			uni.navigateTo({
				url
			});
		},
		getBillList() {
			this.getList('moneyRecordList', 'getGrouperBillList', 'page', { ...this.page, bill_type: this.bill_type });
		}
	},
	watch: {
		curTabs: {
			deep: true,
			handler: function(n, o) {
				console.log(n, o, '变化了');
				this.moneyRecordList = {
					lists: [],
					total: 1,
					total_page: 0
				};
				this.page = {
					page: 1,
					page_size: 4
				};
				this.getBillList();
			}
		}
	},
	computed: {
		bill_type() {
			if (this.curTabs == 0) {
				return 1;
			} else {
				return 2;
			}
		}
	}
};
</script>

<style lang="scss">
.grouperManage {
	background-color: #f9f9f9;
	min-height: 100vh;
	padding: 24rpx 24rpx 100rpx;
	.page_top_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.pageTitle {
			padding-left: 80rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	.integral_balance {
		height: 390rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 46rpx 0;
		text-align: center;
		margin-bottom: 40rpx;
		.integral_balance_title {
			font-size: 30rpx;
			font-weight: 400;
			color: #666666;
			margin-bottom: 20rpx;
		}
		.integral_balance_num {
			font-size: 90rpx;
			font-weight: bold;
			color: #333333;
		}
		.grouper_btn_box {
			display: flex;
			justify-content: center;
			padding: 0 40rpx;
			margin-top: 50rpx;
			.btn_item {
				flex: 1;
				&:nth-child(1) {
					margin-right: 20rpx;
				}
				button {
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
	}
	.tab {
		margin-bottom: 32rpx;
	}
	.details_list {
		.details_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 128rpx;
			box-sizing: border-box;
			padding: 23rpx 26rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.details_info_box {
				.details_name {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					margin-bottom: 4rpx;
				}
				.details_time {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.details_num {
				font-size: 36rpx;
				font-weight: bold;
				color: #f34035;
			}
		}
	}
	.fix_btn_box {
		position: fixed;
		bottom: 20rpx;
		width: 94%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 5rpx;
		button {
			flex: 1;
			&:nth-child(1) {
				margin-right: 10rpx;
			}
		}
	}
}
</style>
